<template>
	<view class="esDetails">
		<view class="es-txt-head flex justify-between align-center">
			<text class="es-txt">My product</text>
			<view class="language round">
				<view @click="onLanguage">
					<text>language</text>
				</view>
			</view>
		</view>
		<view class="electricity">
			<uv-image class="svg-color" src="../../static/img/electricity.svg" mode="" width="48rpx"
				height="48rpx"></uv-image>
			<text>{{electricity}}%</text>
		</view>
		<uv-transition class="details-c" :show="show" :mode="['zoom-out']">
			<image class="es-img" :src="imgUrl">
			</image>
		</uv-transition>
		<view class="details-b">
			<view class="details-txt">
				<view class="title-font">Hi, Welcome!</view>
				<text class="f14666">You can have Al conversations and switch languages</text>
			</view>

			<view class="action-btn">
				<button @click="handleLoginCode" class="login-btn cu-btn block bg-purple lg round">
					<img class="action_img" src="../../static/img/aiChat.svg" alt="" />
					Al chat</button>
			</view>
		</view>
	</view>
</template>

<script>
	// import electricity-1 from "@/static/img/electricity-1.svg"
	export default {
		data() {
			return {
				imgUrl:'https://wechat-img-1311286543.cos.ap-guangzhou.myqcloud.com/es/es2.png',
				show: false,
				electricity: 100,
			
			};

		},
		onLoad(e) {
			this.imgUrl = e.id
			console.log(e);
			this.show = true;
		},
		methods: {
			onLanguage() {
				uni.navigateTo({
					url: '../languageList/languageList'
				});
				this.$refs.actionSheet.open();
			},
			handleLoginCode(){
				uni.navigateTo({
					url: `../scenarioChat/scenarioChat`
				});
			}
	
		}
	}
</script>

<style lang="scss" scoped>
	.esDetails {
		.es-txt-head {
			padding: 0 40rpx;

			.language {
				height: 64rpx;
				line-height: 64rpx;
				padding: 0 40rpx;
				border-radius: 30px;
				border: 1px solid #CCCCCC
			}

			.es-txt {
				font-size: 48rpx;
				font-weight: 400;
				color: #333;
				margin: 60rpx 0;
			}
		}

		.details-c {
			position: relative;
			text-align: center;
			bottom: -200rpx;
			z-index: 9;

			.es-img {
				width: 100%;
				height: 750rpx;
			}
		}

		.details-b {
			margin-top: 300rpx;
			padding: 200rpx 80rpx 0 80rpx;
			position: absolute;
			z-index: 8;
			width: 100%;
			height: 720rpx;
			bottom: 0;
			border-radius: 40px 40px 0px 0px;
			background: linear-gradient(180deg, #F3F3F3 0%, rgba(243, 243, 243, 0) 100%);

			.action-btn {
				margin-top: 80rpx;

				.action_img {
					margin-right: 20rpx;
					margin-bottom: 5rpx;
				}
			}
		}

		.electricity {
			margin: 0 40rpx;
			width: 178rpx;
			height: 64rpx;
			border-radius: 30px;
			background: #EEFAF5;
			color: #51C997;
			line-height: 64rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.svg-color {
				margin-bottom: 5rpx;
				margin-right: 5rpx;
			}

			.svg-color51C997 {
				filter: drop-shadow(#51C997 100px 0);
				transform: translateX(-100px);
			}

			.svg-colorEEC32A {
				filter: drop-shadow(#EEC32A 100px 0);
				transform: translateX(-100px);
			}

			.svg-colorF6694A {
				filter: drop-shadow(#F6694A 100px 0);
				transform: translateX(-100px);
			}
		}
	}
</style>